<script lang="ts" setup>
/**
 * 节点通用属性栏
 */
import { defineProps, onBeforeUnmount, onMounted, ref } from 'vue'
import { Cell } from '@antv/x6'

const props = defineProps<{
  cell: Cell
}>()

let _cell = toRaw(props.cell)
let expose: any = {}

onMounted(function () {
  init()
})

watch(() => props.cell, () => {
  init()
})

function init () {
  _cell = toRaw(props.cell)
  expose = _cell.data.expose
  echartsOptions.value = _cell.data.dataConfig.echartsOptions
  echartsConfig.value = _cell.data.dataConfig.echartsConfig
}
onBeforeUnmount(function () {
  // --
})

// region TODO 属性表单
const echartsOptions = ref({
  legend: { show: true },
  tooltip: { show: true },
  toolbox: { show: true },
  series: [{ itemStyle: { color: '' } }]
})
const echartsConfig = ref({
  textColor: {
    color: ''
  },
  area: {
    show: false,
    color: null
  },
  splitLine: { color: '#EDEEF1' }
})
// endregion

// region TODO 修改Option
function changeOptionsHandle () {
  expose.updateChartAttrs(echartsOptions.value)
}
// endregion

// region TODO 修改折线颜色
function changeChartColorHandle () {
  expose.updateChartColor(echartsOptions.value)
}
// endregion

// region TODO 修改分割线
function changeSplitLineColorHandle () {
  expose.updateSplitLineColor(echartsConfig.value.splitLine)
}
// endregion

// region TODO 修改文本颜色
function changeTextColorHandle () {
  expose.updateChartText(echartsConfig.value.textColor)
}
// endregion

// region TODO 修改渐变色
function areaColorChangeHandle () {
  if (echartsConfig.value.area.show === false) echartsConfig.value.area.color = undefined
  expose.updateChartArea(echartsConfig.value.area)
}
// endregion
</script>

<template>
  <div class="attr-grid" style="grid-template-columns: repeat(2, 1fr);">
    <el-form-item label="文字颜色">
      <el-color-picker v-model="echartsConfig.textColor.color" @change="changeTextColorHandle" />
    </el-form-item>
    <el-form-item label="分割线颜色">
      <el-color-picker v-model="echartsConfig.splitLine.color" @change="changeSplitLineColorHandle" />
    </el-form-item>
    <el-form-item label="折线颜色">
      <el-color-picker v-model="echartsOptions.series[0].itemStyle.color" @change="changeChartColorHandle" />
    </el-form-item>
    <el-form-item label="显示图例">
      <el-switch v-model="echartsOptions.legend.show" @change="changeOptionsHandle" />
    </el-form-item>
    <el-form-item label="显示提示框">
      <el-switch v-model="echartsOptions.tooltip.show" @change="changeOptionsHandle" />
    </el-form-item>
    <el-form-item label="显示工具栏">
      <el-switch v-model="echartsOptions.toolbox.show" @change="changeOptionsHandle" />
    </el-form-item>
    <el-form-item label="渐变">
      <el-switch v-model="echartsConfig.area.show" @change="areaColorChangeHandle" />
    </el-form-item>
    <el-form-item label="渐变颜色">
      <el-color-picker v-model="echartsConfig.area.color" :disabled="!echartsConfig.area.show" @change="areaColorChangeHandle" />
    </el-form-item>
  </div>
</template>

<style lang="scss" scoped>
</style>
